<template>

    <el-header style="text-align: right; font-size: 20px" class="el-header">
      <el-button type="primary" icon="el-icon-shopping-cart-1" circle @click="toCart"></el-button>
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>我的收藏</el-dropdown-item>
          <el-dropdown-item>个人信息</el-dropdown-item>
          <el-dropdown-item>我的订单</el-dropdown-item>
          <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>{{username}}</span>
    </el-header>

</template>

<script>
  export default {
    name: "CommonHeader",
    mounted() {
      let uname = this.getName();
    },

    data(){
      return{
        username:''
      }
    },
    methods:{
      toCart:function () {
        this.$router.push('/cart')
      },

      getName:function () {
        this.username =  sessionStorage.getItem("username")
      },

      logout:function () {
        this.$router.push('/')
      }

    }
  }
</script>

<style scoped>
  .el-header {
    background-color: #409EFF;
    color: #333;
    line-height: 60px;
  }


</style>
